import {CnBoldP, CnNormalP} from '@/components/text'
import useGlobalAPI from '@/hooks/useGlobalAPI'
import {DevNameItem, DevRuntimeItem, DevSystemMsgItem} from './components/infoItem'
import {selectDevInfoApi} from '@/api/public'

export default defineComponent({
  name: 'dataOverview',
  setup() {
    const {route} = useGlobalAPI()

    // 设备信息
    const devInfo = ref({
      /* 设备ID */
      devId: '',
      /* 设备名称 */
      devName: '',
      /* 设备型号 */
      devTypeName: '',
      /* 设备编码 */
      devGId: '',
      /* 系统信息 */
      systemInfo: '',
      /* 经度 */
      longitude: '',
      /* 纬度 */
      dimensionality: '',
      /* 创建时间 */
      CreateTime: '',
      /* 运行时长 */
      runningTime: '',
      /* 省市区 */
      province: '',
      city: '',
      district: '',
      /* 详细地址 */
      devAddress: '',
      /* 设备码 */
      devYard: ''
    })

    onMounted(() => {
      console.log(route.query)
      devInfo.value.devName = route.query.devName
      devInfo.value.devId = route.query.devId
      devInfo.value.devGId = route.query.devGId
      selectDevInfoFunc()
    })

    // 编辑设备名称的点击事件
    const editDevNameClick = () => {
      console.log('lll')
    }

    // 查询设备信息的函数
    const selectDevInfoFunc = async () => {
      let data = {
        devId: route.query.devId
      }
      const res = await selectDevInfoApi(data)
      console.log(res, 'res')

      devInfo.value.devAddress = res.data.devAddress
      res.data.devDataMsgList.forEach((item: any) => {
        switch (item.devBaseDataName) {
          case '系统信息':
            devInfo.value.systemInfo = item.devBaseDataValue
            break
          case '设备型号':
            devInfo.value.devTypeName = item.devBaseDataValue
            break
          case '经度':
            // console.log(item.devBaseDataValue)
            devInfo.value.longitude = item.devBaseDataValue
            // item.devBaseDataValue == '' || item.devBaseDataValue == null
            //   ? devInfo.longitude == '---'
            //   : (devInfo.longitude = item.devBaseDataValue)
            break
          case '纬度':
            // console.log(item.devBaseDataValue)
            devInfo.value.dimensionality = item.devBaseDataValue
            // item.devBaseDataValue == '' || item.devBaseDataValue == null
            //   ? devInfo.dimensionality == '---'
            //   : (devInfo.dimensionality = item.devBaseDataValue)
            break
          default:
            break
        }
      })

      devInfo.value.province = res.data.devEditDataPackList[2].devBaseDataValue
      devInfo.value.city = res.data.devEditDataPackList[3].devBaseDataValue
      devInfo.value.district = res.data.devEditDataPackList[4].devBaseDataValue
      // res.data.devEditDataPackList.forEach((item: any) => {
      //   switch (item.devBaseDataName) {
      //     case '省':
      //       devInfo.province = item.devBaseDataValue
      //       break
      //     case '市':
      //       devInfo.city = item.devBaseDataValue
      //       break
      //     case '区':
      //       devInfo.district = item.devBaseDataValue
      //       break
      //     default:
      //       break
      //   }
      // })

      res.data.devServerMsgPackList.forEach((item: any) => {
        switch (item.serverPropertyName) {
          case '创建时间':
            devInfo.value.CreateTime = item.serverPropertyValue
            break
          case '运行时长':
            devInfo.value.runningTime = item.serverPropertyValue
            break
          default:
            break
        }
      })

      console.log(devInfo, 'devInfo')
    }

    return () => (
      <div class='pb-24'>
        <CnBoldP class='mt-11 text-20'>设备信息</CnBoldP>
        <CnNormalP class='mt-6 mb-20 text-4xText'>查看您的设备信息</CnNormalP>
        <div class='grid grid-cols-1 gap-x-20 gap-y-20'>
          <DevNameItem devInfo={devInfo.value} editDevNameClick={editDevNameClick()}></DevNameItem>
          <DevRuntimeItem devInfo={devInfo.value}></DevRuntimeItem>
          <DevSystemMsgItem devInfo={devInfo.value}></DevSystemMsgItem>
        </div>
      </div>
    )
  }
})
